<template>
	<view class="container" v-if="isload">
		<image :src="info.banner" style="width:100%;height:auto;display:table" mode="widthFix" v-if="info.banner" />
		<form @submit="formSubmit">
			<view class="content"
				:style="{ background: 'linear-gradient(180deg,' + info.bgcolor + ' 0%,rgba(' + info.bgcolorrgb.red + ',' + info.bgcolorrgb.green + ',' + info.bgcolorrgb.blue + ',0) 100%)' }">
				<view class="form">
					<image :src="pre_url + '/static/img/renovation_calculator/form_price.gif'" mode="widthFix"
						class="form_price" alt="" />
					<view class="form_option">
						<text>客厅 ?? 元</text>
						<text>厨房 ?? 元</text>
						<text>卧室 ?? 元</text>
					</view>
					<view>
						<view class="form_item" style="padding:10rpx 10rpx">
							<uni-data-picker :localdata="items" :border="false" :placeholder="regiondata || '请选择地区'"
								@change="regionchange" style="width:100%"></uni-data-picker>
						</view>
						<view class="form_item">
							<input class="form_input" type="number" value="90" name="mianji" />
							<text>㎡</text>
						</view>
					</view>
					<button class="form-btn" form-type="submit"
						:style="{ background: 'linear-gradient(180deg,' + info.bgcolor + ' 0%,rgba(' + info.bgcolorrgb.red + ',' + info.bgcolorrgb.green + ',' + info.bgcolorrgb.blue + ',0.8) 100%)' }">立即估算报价</button>

					<view class="xieyi-item" v-if="info.xystatus == 1">
						<checkbox-group @change="isagreeChange"><label class="flex-y-center">
								<checkbox class="checkbox" value="1" :checked="isagree" />我已阅读并同意
							</label></checkbox-group>
						<text :style="{ color: info.bgcolor }" @tap="showxieyiFun">《用户使用协议》</text>
					</view>
				</view>
			</view>
			<view v-if="showxieyi" class="xieyibox">
				<view class="xieyibox-content">
					<view style="overflow:scroll;height:100%;">
						<parse :content="info.xieyi" @navigate="navigate"></parse>
					</view>
					<view
						style="position:absolute;z-index:9999;bottom:10px;left:0;right:0;margin:0 auto;text-align:center; width: 50%;height: 60rpx; line-height: 60rpx; color: #fff; border-radius: 8rpx;"
						:style="{ background: 'linear-gradient(90deg,' + info.bgcolor + ' 0%,rgba(' + info.bgcolorrgb.red + ',' + info.bgcolorrgb.green + ',' + info.bgcolorrgb.blue + ',0.8) 100%)' }"
						@tap="hidexieyi">已阅读并同意</view>
				</view>
			</view>
		</form>
		<view class="qd_guize">
			<!-- <view class="gztitle"> — 兑换规则 — </view> -->
			<view class="guize_txt">
				<parse :content="info.description" />
			</view>
		</view>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,
			pre_url: app.globalData.pre_url,
			items: [],
			showxieyi: false,
			isagree: false,
			info: {},
			regiondata: '',
		}
	},
	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		var that = this;
		app.get('ApiIndex/getCustom', {}, function (customs) {
			var url = app.globalData.pre_url + '/static/area.json';
			uni.request({
				url: url,
				data: {},
				method: 'GET',
				header: { 'content-type': 'application/json' },
				success: function (res2) {
					that.items = res2.data
				}
			});
		});

		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	methods: {
		getdata: function () {
			var that = this;
			that.loading = true;
			app.get('ApiRenovationCalculator/form', {}, function (res) {
				that.info = res.info;
				uni.setNavigationBarTitle({
					title: that.info.name
				});
				that.loaded();
			});
		},
		regionchange(e) {
			const value = e.detail.value
			console.log(value[0].text + ',' + value[1].text + ',' + value[2].text);
			this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text
		},
		isagreeChange: function (e) {
			var val = e.detail.value;
			if (val.length > 0) {
				this.isagree = true;
			} else {
				this.isagree = false;
			}
			console.log(this.isagree);
		},
		showxieyiFun: function () {
			this.showxieyi = true;
		},
		hidexieyi: function () {
			this.showxieyi = false;
			this.isagree = true;
			if (this.wxloginclick) {
				this.weixinlogin();
			}
			if (this.iosloginclick) {
				this.ioslogin();
			}
		},
		formSubmit(e) {
			var that = this;
			var formdata = e.detail.value;
			formdata.regiondata = that.regiondata;
			if (formdata.regiondata == '') {
				app.error('请选择地区');
				return;
			}
			if (formdata.mianji == '') {
				app.error('请填写面积');
				return;
			}
			if (that.info.xystatus == 1 && !that.isagree) {
				app.error('请先阅读并同意用户使用协议');
				return false;
			}
			app.goto('result?region=' + formdata.regiondata + '&mianji=' + formdata.mianji);
		},
		agreementClick() {
			if (this.agreementState) {
				this.agreementState = false;
			} else {
				this.agreementState = true;
			}
		}
	}
};
</script>
<style>
page {
	background: #f0f0f0;
}

.content {
	width: 750rpx;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
}

.form {
	padding: 35rpx;
	width: 710rpx;
	position: relative;
	border-radius: 35rpx;
	background: #fff;
	box-sizing: border-box;
	margin: 0 auto;
}

.form_price {
	width: 100%;
	display: block;
}

.form_option {
	padding: 30rpx 15rpx;
	font-size: 26rpx;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}

.form_item {
	font-size: 30rpx;
	padding: 30rpx;
	background: #f6f7f9;
	border-radius: 10rpx;
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form_input {
	flex: 1;
}

.form_item img {
	height: 40rpx;
	width: 40rpx;
}

.form_item:first-child {
	margin-top: 0;
}

.form_btn {
	width: 100%;
	display: block;
	margin-top: 30rpx;
}

.agreement {
	position: relative;
	margin-top: 25rpx;
	padding: 0 20rpx;
}

.agreement_icon {
	height: 23rpx;
	width: 23rpx;
	margin: 5rpx 10rpx 0 0;
	display: block;
}

.agreement_text {
	font-size: 22rpx;
	color: #999;
}

.agreement_tag {
	color: #26c256;
}

.select {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: flex-end;
	background: rgba(0, 0, 0, 0.7);
}

.select_hide {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.select_body {
	position: relative;
	height: 100%;
	width: 600rpx;
	display: flex;
	border-top: 1rpx solid #f0f0f0;
	box-sizing: border-box;
	background: #fff;
}

.select_module {
	flex: 1;
	height: 100%;
}

.select_item {
	font-size: 26rpx;
	color: #333;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
	margin-top: -2rpx;
	border-top: 1rpx solid #f0f0f0;
	border-right: 1rpx solid #f0f0f0;
	border-bottom: 1rpx solid #f0f0f0;
}

.select_active {
	background: #f8f8f8;
	color: #26c165;
}

.qd_guize {
	width: 100%;
	margin: 30rpx 0 20rpx 0;
}

.qd_guize .gztitle {
	width: 100%;
	text-align: center;
	font-size: 32rpx;
	color: #656565;
	font-weight: bold;
	height: 100rpx;
	line-height: 100rpx
}

.guize_txt {
	box-sizing: border-box;
	padding: 0 30rpx;
	line-height: 42rpx;
}

.form-btn {
	margin-top: 60rpx;
	width: 100%;
	height: 96rpx;
	line-height: 96rpx;
	color: #fff;
	font-size: 30rpx;
	border-radius: 8rpx;
}

.xieyi-item {
	display: flex;
	align-items: center;
	margin-top: 30rpx
}

.xieyi-item {
	font-size: 24rpx;
	color: #B2B5BE
}

.xieyi-item .checkbox {
	transform: scale(0.6);
}

.xieyibox {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	background: rgba(0, 0, 0, 0.7)
}

.xieyibox-content {
	width: 90%;
	margin: 0 auto;
	height: 80%;
	margin-top: 20%;
	background: #fff;
	color: #333;
	padding: 5px 10px 50px 10px;
	position: relative;
	border-radius: 2px
}</style>
